<template>
  <a-config-provider :locale="zhCN">
    <div class="myBackgroud">
      <div style="height: 60px; line-height: 60px ; width: 100%; color: white;text-align: center; font-size: 22px;">
        大数据分析与可视化
      </div>
      <hr class="hrcss" />
      <div id="left" style="width: 33%;float: left;">
        <div style="width: 100%; height: 400px;">
          <div class="divEcharts">
            <!-- 第一步：定义ref -->
            <LeftTop ref="chRef"></LeftTop>
          </div>
        </div>

        <div style="width: 100%; height: 400px;">
          <div class="divEcharts">
            <LeftBottom :weekData="weekDataArray" abcd="测试其他参数的传递" :maxTemArray="maxTemArray" :minTemArray="minTemArray"
              @myGetLeftBottomHandClick="LeftBottomHandClick" :cityName="cityName">
            </LeftBottom>
          </div>
        </div>
      </div>
      <div id="center" style="float: left;width: 34%;height: 820px;">
        <div style="width: 100%; height: 100%;">
          <div class="divEcharts">
            <MapEcharts @myGetClick="wyj"></MapEcharts>
          </div>
        </div>
      </div>
      <div id="rigth" style="float: right;width: 33%;height: 820px;">
        <div style="width: 100%; height: 100%;">
          <div class="divEcharts">
            <RightTop :hoursWeekData="hoursWeekData" :cityNameAddWeekName="cityNameAddWeekName"></RightTop>
          </div>
        </div>
      </div>
    </div>
  </a-config-provider>
</template>

<script setup>
import LeftTop from './components/LeftTop.vue';
import LeftBottom from './components/LeftBottom.vue';
import MapEcharts from './components/MapEcharts.vue';
import RightTop from './components/RightTop.vue';
import { ref, onMounted } from 'vue';
import axios from 'axios';
import zhCN from 'ant-design-vue/es/locale/zh_CN';


let weekDataArray = ref([1, 2, 3, 4, 5, 6, 7])
let maxTemArray = ref([])
let minTemArray = ref([])
let hoursWeekData = ref([])
let cityName = ref()
let cityNameAddWeekName = ref()

const wyj = (data) => {
  //调用另一个子模块的方法 或 传值给另一个子模块
  myAjaxData(data)
}


let dataWeeksHours = []
const LeftBottomHandClick = (dataWeek) => {
  // of 循环数组， in是循环对象的
  for (let jsonObject of dataWeeksHours) {
    if (jsonObject.week == dataWeek) {
      hoursWeekData.value = jsonObject.hours
      cityNameAddWeekName.value = cityName.value + '(' + dataWeek + ')'
    }
  }
}

// 第二步：ref 同名变量
const chRef = ref()

//===========================================
onMounted(() => {
  myAjaxData('太原')
})
const myAjaxData = (city) => {
  cityName.value = city
  axios.get('https://v1.yiketianqi.com/api', {
    params: {
      appid: 23035354,
      appsecret: '8YvlPNrz',
      version: 'v9',
      cityid: 0,
      city: city,
      ip: 0,
      callback: 0
    }
  })
    .then(function (response) {
      console.log(response);
      let { pm25, o3, no2, co, so2, city } = response.data.aqi
      let dataArray = [
        { value: pm25, name: 'PM2.5' },
        { value: o3, name: '臭氧' },
        { value: no2, name: '二氧化氮' },
        { value: co, name: '一氧化碳' },
        { value: so2, name: '二氧化硫' }
      ]
      // 第三步：调用子模块里暴露出来的方法
      chRef.value.myEchartsPie(response.data.city, dataArray)
      //============================================================================
      let weeks = response.data.data
      dataWeeksHours = weeks
      // 定义星期的数组
      let weekData = []
      // 定义最高温度的数组
      let maxTem = []
      // 定义最低温度的数组
      let minTem = []

      for (let i = 0; i < weeks.length; i++) {
        weekData[i] = weeks[i].week
        maxTem[i] = weeks[i].tem1
        minTem[i] = weeks[i].tem2
      }
      // console.log(weekData)
      weekDataArray.value = weekData
      maxTemArray.value = maxTem
      minTemArray.value = minTem
    })
    .catch(function (error) {
      console.log(error);
    });
}




</script>

<style scoped>
.myBackgroud {
  background-image: url('./assets/bj.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

.divEcharts {
  margin-left: 6px;
  margin-top: 6px;
  width: 97%;
  height: 97%;
  border: 0px blue solid;
  border-radius: 10px;
  box-shadow: 0px -5px 4px 0px #2279ee,
    -6px 0px 4px 0px #2279ee,
    6px 0px 4px 0px #2279ee,
    0px 5px 4px 0px #2279ee;
}

.hrcss {
  margin-top: 6px;
  width: 100%;
  height: 6px;
  border: 0px blue solid;
  box-shadow: 0px 0px 0px 0px #2279ee,
    0px 0px 0px 0px #2279ee,
    0px -5px 4px 0px #2279ee,
    0px 0px 0px 0px #2279ee;
}
</style>
